<template>
  <div class="device">
    <!-- 筛选 -->
    <search @search_data="search_data"></search>
    <!-- 表单列表 -->
    <div class="device-manage">
      <div class="export">
        <!-- <el-button
          v-has-permission="'equment_save'"
          size="small" type="primary" @click="addEqument">设备收货</el-button> -->
        <el-button
         v-has-permission="'equment_dispath'"
         size="small" type="primary" @click="equipmentAllocation">出库分配</el-button>
      </div>
      <el-table :data="listData" stripe :header-cell-style="getRowClass" v-loading="loading">
        <el-table-column prop="num" label="序号"></el-table-column>
        <el-table-column prop="imei" label="IMEI号"></el-table-column>
        <el-table-column prop="update_time" label="出库时间"></el-table-column>
        <el-table-column prop="box_number" label="箱号"></el-table-column>
        <el-table-column prop="devname" label="设备类型">
          <template slot-scope="scope">
            <div style="display: inline;" v-if="scope.row.devname =='fireplug'">消防栓</div>
            <div style="display: inline;" v-if="scope.row.devname =='scm'">烟感设备</div>
          </template>
        </el-table-column>
        <el-table-column prop="storehouses_name" label="设备归属库"></el-table-column>
        <el-table-column prop="sw_version" label="版本号"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              title="查看"
              @click="handelSee(scope.row)"
              style="width:0px;padding:0"
            >
              <img src="/static/image/device/see.png">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
       <page-list
        :size.sync="dev_pageSize"
        :total="totals"
        :current.sync="dev_currentPage"
        @change="getListData"
      ></page-list>
      <!-- Form 弹框查看 -->
      <el-dialog
      :close-on-click-modal="false"
        title="设备预览"
        :visible.sync="dialogTableVisible"
        :modal-append-to-body="false"
        class="dialog-see">
        <el-form :model="form" @submit.native.prevent>
          <el-form-item label="IMEI编号：" style="margin-left: 12px;display:inherit">{{form.imei}}</el-form-item>
          <el-form-item label="入库时间：" style="margin-left: 12px;display:inherit">{{form.update_time}}</el-form-item>
          <el-form-item label="版本号："  style="margin-left: 25px;display:inherit">{{form.sw_version}}</el-form-item>
          <el-form-item label="设备归属库：" style="margin-left: 5px;display:inherit">{{form.storehouses_name}}</el-form-item>
        </el-form>
      </el-dialog>
      <!-- 出库分配弹框 -->
      <dispathequment :messagedispath="dispathequment" @listendispath="dispathflags" @change='getListData'></dispathequment>
      <!-- 设备收货-->
      <!-- <newequment :messageflag="exportequment" @listenflag="exportflags" @change='getListData'></newequment> -->
    </div>
  </div>
</template>

<script>
import Config from "@/config.js";
import Search from "../Search";
import moment from "moment";
import Dispathequment from './Dispathequment'
// import Newequment from "../Newequment";

import { mapGetters } from "vuex";
import PageList from "@/components/PageList";

export default {
  name: "DeviceManage",
  components: {
    Search,
    Dispathequment,
    PageList,
    // Newequment
  },
  props:["messageOut"],
  data() {
    return {
      //父向子
      // exportequment: "",
      dispathequment: '',
      ops: {
        bar: {
          background: "#DDDEE0"
        }
      },
      // 列表分页
      totals: 0,
      dev_currentPage: 1,
      dev_pageSize: 15,
      inputs: 15,
      //列表
      listData: [],
      // loading
      loading: true,
      // 查看
      dialogTableVisible: false,
      //弹框数据
      form: {},
      obj:{}, // 存储筛选数据
      storeLever:'',
      citystoreLeve:'',
    };
  },
  methods: {
    // 设备入库
    // addEqument() {
    //   this.exportequment = true;
    // },
    // 入库子传父
    // exportflags() {
    //   this.exportequment = false;
    // },
    // 分配子传父
    dispathflags(){
      this.dispathequment = false
    },
    // 出库分配弹框
    equipmentAllocation() {
      this.dispathequment = true
    },
    // 筛选条件
    search_data(datas) {
      console.log(datas)
      this.currentPage = 1;
      let data = JSON.parse(JSON.stringify(datas));
    //   console.log(data)
      this.loading = true;
      let obj = {};
      switch (data.typestatus) {
        case "消防栓":
          obj.devname = "fireplug";
          break;
        case "烟感设备":
          obj.devname = "scm";
          break;
      }
      if(data.siteId){
        obj.current_owner_id = data.siteId;
      }
      this.obj = JSON.parse(JSON.stringify(obj));
      this.getListData();
    },
    // 表头添加背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#f6f6f6";
      } else {
        return "";
      }
    },
    // 获取仓库等级以及当前库位名字
    getSub() {
      const url = `${Config.DEVICE_MANAGE_URL}/storehouses/query_common?page=0&size=500`;
      var params = {}
      if (this.district.districtType === 1) {
       params.country = '86';
      }else if (this.district.districtType === 2) {
        params.province = this.district.provinceCode;
      } else if(this.district.districtType === 3) {
        params.city = this.district.cityCode;
      }
      this.$http.get(url,params).then(res => {
        // 根据省市获取对应仓库名字
        if(this.district.districtType === 2){
          this.storeLever = res.array.filter(res => res.city === null)[0].store_level
        }
        if (this.district.districtType === 3) {
          this.citystoreLeve = res.array.filter(res => res.district === null)[0].store_level
        }
        this.getListData()
      });
    },
    // 获取列表
    getListData() {
      this.loading = true;
      let url = `${Config.DEVICE_MANAGE_URL}/device_house_user/query?page=${this.dev_currentPage - 1}&size=${this.dev_pageSize}&devtype=${Config.objType.devtype}&house_owner=${this.user.company}`;

      var params = {}
      if (this.district.districtType === 1) {
       params.country = '86';
      }else if (this.district.districtType === 2) {
        params.province = this.district.provinceCode;
        params.house_level_min = this.storeLever
      } else if(this.district.districtType === 3) {
        params.city = this.district.cityCode;
        params.house_level_min = this.citystoreLeve
      }
      params.imei = this.messageOut ? this.messageOut : undefined;
      params.devname = this.obj.devname ? this.obj.devname : undefined
      params.current_owner_id = this.obj.current_owner_id ? this.obj.current_owner_id : undefined
      this.$http.get(url, params).then(res => {
        // console.log(res);
        this.totals = res.allcount;
        if (res.array.length) {
          res.array.map((item, i) => {
            if (this.dev_currentPage === 1) {
              item.num = i + 1;
            } else {
              item.num = (this.dev_currentPage - 1) * this.dev_pageSize + i + 1;
            }
          item.update_time = moment(item.update_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.listData = res.array;
          this.loading = false;
        } else {
          this.listData = res.array;
          this.loading = false;
        }
      });
    },
    // 查看
    handelSee(data) {
      for (var i in data) {
        this.form[i] = data[i];
      }
      // this.form = JSON.parse(JSON.stringify(data));
      this.dialogTableVisible = true;
      // console.log(data)
    }
  },
  created() {
    // this.getListData();
    this.getSub()

  },
  computed: {
    ...mapGetters("user", {
      district: "getDistrict",
      role: "getRole",
      user: "getUser"

    })
  },
  watch:{
    messageOut(data){
      this.getListData()
    }
  }
};
</script>

<style lang='scss' >
@import "../../../../../../static/scss/common";
.device {
  width: 100%;
  height: 100%;

  //列表
  .device-manage {
    width: 100%;
    height: auto;
    background: $white;
    margin-top: 24px;
    .export {
      height: 24px;
      line-height: 24px;
      margin-right: 27px;
      text-align: right;
      padding-top: 12px;
    }
    // 查看
    .dialog-see.el-dialog__wrapper {
      .el-dialog {
        // width: 550px;
        width: 320px;
        height: 260px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
        .el-dialog__body {
          .el-form {
            .el-form-item {
              .el-form-item__label {
                line-height: 36px;
                padding: 0;
              }
              .el-form-item__content {
                line-height: 36px;
              }
            }
          }
        }
      }
    }
    // 出库分配
    #equipments {
      .btn-current {
        color: $white !important;
        background: $red !important;
        border-color: $red !important;
      }

      .el-dialog {
        width: 1000px;
        height: 800px;
        .el-dialog__header {
          padding: 24px;
          .el-dialog__title {
            color: $gray3;
            font-size: 16px;
          }
          .el-dialog__headerbtn {
            top: 24px;
          }
        }
        .el-dialog__body {
          padding-top: 24px;
          #tabCard {
            text-align: center;
            border: 0;
            .el-tabs__header {
              display: inline-block;
              border: 0;
              .el-tabs__nav-wrap {
                .el-tabs__nav-scroll {
                  background: transparent;
                  text-align: center;
                  padding: 0;
                  margin: 0;
                  display: inline-block;
                  .el-tabs__nav {
                    border-radius: 0;
                    border: 0;
                    .el-tabs__item {
                      width: 190px;
                      height: 36px;
                      color: #999;
                      background: #f8f8f8;
                    }
                    .el-tabs__item.is-active {
                      background: $red;
                      color: #fff;
                    }
                  }
                }
              }
            }
            .el-tabs__content {
              margin: 10px 0px 0px;
              #pane-first,
              #pane-second,
              #pane-third {
                .el-steps--simple {
                  padding: 7px 8%;
                  background: #f8f8f8;
                }
                .el-step__title.is-success {
                  color: $red;
                  position: relative;
                }
                .el-step__title.is-success:before {
                  position: absolute;
                  display: block;
                  left: -20px;
                  top: 13px;
                  content: " ";
                  width: 20px;
                  height: 20px;
                  background: url("/static/image/device/step-1.png")
                    no-repeat;
                }
                .el-step__head.is-process,
                .el-step__head.is-wait {
                  color: #999;
                  border-color: #999;
                  position: relative;
                }
                .el-step__title.is-process {
                  color: #999;
                  border-color: #999;
                }
                .el-step__head.is-process:before {
                  position: absolute;
                  display: block;
                  left: -10px;
                  top: -8px;
                  content: " ";
                  width: 20px;
                  height: 20px;
                  background: url("/static/image/device/step-2.png")
                    no-repeat;
                }
                .el-step__head.is-wait:before {
                  position: absolute;
                  display: block;
                  left: -12px;
                  top: -8px;
                  content: " ";
                  width: 20px;
                  height: 20px;
                  background: url("/static/image/device/step-3.png")
                    no-repeat;
                }
                .el-step.is-simple .el-step__title {
                  font-size: 12px;
                  line-height: 40px;
                  font-weight: 400;
                }
                .el-step.is-simple .el-step__icon {
                  display: none;
                }
                .el-step__head.is-success {
                  color: $red;
                  border-color: $red;
                }
                .el-step__icon.is-text {
                  border: 0;
                  border-radius: 0;
                }
              }
            }
            #firstCard {
              height: 450px;
              padding: 30px 35px 24px 35px;
              background: #f8f8f8;
              margin-top: 20px !important;
              box-sizing: border-box;
              .firststorage {
                display: inline-block;
                width: 100%;
                .delect {
                  float: left;
                  width: 280px;
                  height: 50px;
                  margin: 0 7px 15px;
                  box-shadow: 0 4px 18px rgba(69,71,74,.1);
                  background: #fff;
                }
                .el-form {
                  display: inline-block;
                  .el-input {
                    width: 760px;
                    .el-input__inner {
                      border-radius: 0px;
                      border: 1px solid $red;
                    }
                  }
                }
                .el-button {
                  margin-left: -6px;
                  background: $red;
                  width: 110px;
                  height: 40px;
                  border-radius: 0;
                }
              }
            }
            .dialog-footer.footer {
              margin-top: 20px;
              text-align: center;
              .btnClosed {
                width: 86px;
                height: 28px;
                padding: 0;
                background: #bebebe;
                border: #bebebe;
                span{
                  font-size: 14px;
                }
              }
              .btnClosed:hover {
                background: #cecece;
                border: #cecece;
              }
              .btnClosed:active {
                background: #b2b2b2;
                border: #b2b2b2;
              }
              .btnSaved{
                width: 86px;
                height: 28px;
                padding: 0;
                span{
                  font-size: 14px;
                }
              }
            }
            .delectBtn {
              border: 0;
              background: none;
            }
            .delectBtn:focus {
              border: 0px;
              background: none;
              outline: 0;
            }
            .add {
              color: #fff;
              background-color: #f7afaf;
              border-color: #f7afaf;

            }
          }
        }
      }
    }
    // 出库分配
    #equmentBatch {
      .btn-current {
        color: $white !important;
        background: $red !important;
        border-color: $red !important;
      }

      .el-dialog {
        width: 1000px;
        height: 720px;
        .el-dialog__header {
          padding: 24px;
          .el-dialog__title {
            color: $gray3;
            font-size: 16px;
          }
          .el-dialog__headerbtn {
            top: 24px;
          }
        }
        .el-dialog__body {
          padding-top: 0px;
          #tabCard {
            border: 0;
            .el-tabs__header {
              display: inline-block;
              border: 0;
              .el-tabs__nav-wrap {
                .el-tabs__nav-scroll {
                  background: transparent;
                  text-align: center;
                  padding: 0;
                  margin: 0;
                  display: inline-block;
                  .el-tabs__nav {
                    border-radius: 0;
                    border: 0;
                    .el-tabs__item {
                      width: 190px;
                      height: 36px;
                      color: #999;
                      background: #f8f8f8;
                    }
                    .el-tabs__item.is-active {
                      background: $red;
                      color: #fff;
                    }
                  }
                }
              }
            }
            .el-tabs__content {
              .el-steps--simple {
                  padding: 7px 8%;
                  background: #f8f8f8;
                }
                .el-step__title.is-success {
                  color: $red;
                  position: relative;
                }
                .el-step__title.is-success:before {
                  position: absolute;
                  display: block;
                  left: -20px;
                  top: 13px;
                  content: " ";
                  width: 20px;
                  height: 20px;
                  background: url("/static/image/device/step-1.png")
                    no-repeat;
                }
                .el-step__head.is-process,
                .el-step__head.is-wait {
                  color: #999;
                  border-color: #999;
                  position: relative;
                }
                .el-step__title.is-process {
                  color: #999;
                  border-color: #999;
                }
                .el-step__head.is-process:before {
                  position: absolute;
                  display: block;
                  left: -10px;
                  top: -8px;
                  content: " ";
                  width: 20px;
                  height: 20px;
                  background: url("/static/image/device/step-2.png")
                    no-repeat;
                }
                .el-step__head.is-wait:before {
                  position: absolute;
                  display: block;
                  left: -12px;
                  top: -8px;
                  content: " ";
                  width: 20px;
                  height: 20px;
                  background: url("/static/image/device/step-3.png")
                    no-repeat;
                }
                .el-step.is-simple .el-step__title {
                  font-size: 12px;
                  line-height: 40px;
                  font-weight: 400;
                }
                .el-step.is-simple .el-step__icon {
                  display: none;
                }
                .el-step__head.is-success {
                  color: $red;
                  border-color: $red;
                }
                .el-step__icon.is-text {
                  border: 0;
                  border-radius: 0;
                }
            }
            #firstCard {
              height: 450px;
              padding: 30px 35px 24px 35px;
              background: #f8f8f8;
              margin-top: 20px !important;
              box-sizing: border-box;
              .firststorage {
                display: inline-block;
                width: 100%;
                .delect {
                  float: left;
                  width: 280px;
                  height: 50px;
                  margin: 0 7px 15px;
                  box-shadow: 0 4px 18px rgba(69,71,74,.1);
                  background: #fff;
                }
                .el-form {
                  display: inline-block;
                  .el-input {
                    width: 760px;
                    .el-input__inner {
                      border-radius: 0px;
                      border: 1px solid $red;
                    }
                  }
                }
                .el-button {
                  margin-left: -6px;
                  background: $red;
                  width: 110px;
                  height: 40px;
                  border-radius: 0;
                }
              }
            }
            .dialog-footer.footer {
              margin-top: 20px;
              text-align: center;
              .btnClosed {
                width: 86px;
                height: 28px;
                padding: 0;
                background: #bebebe;
                border: #bebebe;
                span{
                  font-size: 14px;
                }
              }
              .btnClosed:hover {
                background: #cecece;
                border: #cecece;
              }
              .btnClosed:active {
                background: #b2b2b2;
                border: #b2b2b2;
              }
              .btnSaved{
                width: 86px;
                height: 28px;
                padding: 0;
                span{
                  font-size: 14px;
                }
              }
            }
            .delectBtn {
              border: 0;
              background: none;
            }
            .delectBtn:focus {
              border: 0px;
              background: none;
              outline: 0;
            }
            .add {
              color: #fff;
              background-color: #f7afaf;
              border-color: #f7afaf;

            }
          }
        }
      }
    }
  }
}
</style>
